<template>
    <button v-bind="$attrs" @click="handleClick" class="frog-button" :class="[
        type ? `frog-button--${type}` : 'frog-button--default',
        size ? `frog-button--${size}` : '',
        {
            'is-disabled': disabled,
            'is-circle': circle,
            'is-block':block
        }
    ]">
        <i v-if="loading"></i>
        <i class="frog-icon" :class="icon" v-if="icon && !loading"></i>
        <span v-if="$slots.default">
            <slot></slot>
        </span>
    </button>
</template>
<script>
export default {
    name: 'FrogButton',
    props: {
        type: {
            type: String,
            default: 'default',
            vaildator: (val) => {
                return ['default', 'primary', 'success', 'warning', 'danger', 'info', 'text'].include(val);
            }
        },
        size: {
            type: String,
            default: 'medium',
            vaildator: (val) => {
                return ['large', 'medium', 'small', 'mini'].include(val);
            }
        },
        icon: {
            type: String,
            default: ''
        },
        loading: Boolean,
        disabled: Boolean,
        circle: Boolean,
        block:Boolean
    },
    methods: {
        handleClick(event) {
            this.$emit('click', event);
        }
    },
}
</script>

<style scoped>
.frog-button {
    --frog-button-primary-color: #0477FF;
    --frog-button-success-color: #22c55e;
    --frog-button-warning-color: #FFB400;
    --frog-button-danger-color: #dc2626;
    --frog-button-info-color: #2563eb;
    --frog-button-default-color: #333333;
    --frog-button-default-border-color: #d9d9d9;
}

button{
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
}


/**
* frog-button default style
*/
.frog-button {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    color: var(--frog-button-default-color);
    outline: none;
    box-sizing: border-box;
    transition: 0.3s;
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px;
    border-style: solid;
    border-color: var(--frog-button-default-border-color);
}

.frog-button--default:hover {
    color: var(--frog-button-default-color);
    border-color: var(--frog-button-default-border-color);
}

.frog-button--default:active {
    color: #0477FF;
    border-color: #0464ff;
}


/**
* frog-button primary style
*/
.frog-button--primary {
    color: #fff;
    background-color: var(--frog-button-primary-color);
    border-color: var(--frog-button-primary-color);
}

.frog-button--primary:hover {
    background-color: #0464ff;
    border-color: #0464ff;
}

.frog-button--primary:active {
    background-color: #0359d0;
}


/**
* frog-button success style
*/
.frog-button--success {
    color: #fff;
    background-color: var(--frog-button-success-color);
    border-color: var(--frog-button-success-color);
}


.frog-button--success:hover {
    background-color: #1daa50;
    border-color: #1daa50;
}

.frog-button--success:active {
    background-color: #0e8e3d;
}


/**
* frog-button warning style
*/
.frog-button--warning {
    color: #fff;
    background-color: var(--frog-button-warning-color);
    border-color: var(--frog-button-warning-color);
}

.frog-button--warning:hover {
    background-color: #e6a23c;
    border-color: #e6a23c;
}

.frog-button--warning:active {
    background-color: #d3880d;
}


/**
* frog-button danger style
*/
.frog-button--danger {
    color: #fff;
    background-color: var(--frog-button-danger-color);
    border-color: var(--frog-button-danger-color);
}

.frog-button--danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

.frog-button--danger:active {
    background-color: #991b1b;
}
</style>

<style scoped>
/**
* frog-button size style
*/
.frog-button--large {
    padding: 14px 24px;
    font-size: 16px;
}

.frog-button--small {
    padding: 10px 16px;
    font-size: 12px;
}

.frog-button--mini {
    padding: 6px 12px;
    font-size: 10px;
}
</style>

<style scoped>
.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.is-circle {
    border-radius: 50%;
    padding: 2px;
}

.is-block{
    width: 100%;
}
</style>